<template>
  <el-dialog :append-to-body="true" :close-on-click-modal="false" :visible.sync="dialog" title="审批记录" width="100%" height="90%">
    <div style="width:100%;height:100%;background-color: white;">
      <div style="float:left;width:50%;height:500px;display:flex;background-color: white;">
        <!--表格渲染-->
        <DataGridTable
          v-loading="loading"
          :data="approvedData"
          :show-page="false"
          :multi-select="false"
          :show-row-number="true">
          <el-table-column :show-overflow-tooltip="true" prop="taskTitle" label="任务标题" />
          <el-table-column prop="name" label="节点名" width="120px" />
          <el-table-column prop="approveAccount" label="审批人" width="120px" />
          <el-table-column prop="approveType" label="审批状态" width="120px" />
          <el-table-column prop="approveMsg" label="审批意见" width="120px" />
          <el-table-column :show-overflow-tooltip="true" prop="beginDate" label="开始日期" width="150px" >
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.beginDate) }}</span>
            </template>
          </el-table-column>
          <el-table-column :show-overflow-tooltip="true" prop="approveDate" label="审批日期" width="150px" >
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.approveDate) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="taskDesc" label="任务描述"/>
        </DataGridTable>
      </div>
      <div class="right" style="float:left;height:500px;width:50%;background-color: white; overflow: auto;">
        <el-timeline>
          <el-timeline-item
            v-for="(step, index) in approvedData"
            :key="index"
            :icon="getStepType(step)[1]"
            :type="getStepType(step)[0]"
            placement="top"
            size="large"
          >
            <el-card>
              <h4>{{ step.name }}</h4>
              <p>处理人：{{ step.approveAccount }}</p>
              <p v-if="step.approveType">
                处理结果：
                <span :style="`color: ${step.approveType === 'pass' ? '#67C23A' : '#F56C6C'}`">
                  {{
                    step.approveType === 'pass' ? ' 同意' : ' 驳回'
                  }}</span>
              </p>
              <p v-if="step.approveMsg">处理意见：{{ step.approveMsg }}</p>
              <p v-if="step.approveDate">处理时间：{{ parseTime(step.approveDate) }}</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { parseTime } from '@/utils/index'
import { getApproveHistoryByInfo } from '@/api/system/workflowApprove'

export default {
  props: {
    sup_this: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      loading: false,
      dialog: false,
      busMainData: {},
      approvedData: []
    }
  },
  methods: {
    parseTime,
    loadDataOfBefore(row) {
      const { processInstanceId, businessKey } = row
      this.busMainData = row
      getApproveHistoryByInfo(processInstanceId, businessKey).then(res => {
        this.approvedData = res.data
      })
    },
    getStepType(step) {
      if (step.curActivity) {
        return ['warning', 'el-icon-time']
      } else {
        if (step.approveType) {
          return step.approveType === 'pass' ? ['success', 'el-icon-circle-check'] : ['danger', 'el-icon-circle-close']
        } else {
          return ['info', 'el-icon-more-outline']
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .el-card {
    width: 50%;
  }
</style>
